{% extends "base.html" %}

{% block title %}Create Profile{% endblock %}

{% block content %}


<script type="text/javascript" >


 $(document).ready(function() {
   // put all your jQuery goodness in here.


{% for movie in movies %}
$("#stars-wrapper-{{movie.key}}").stars({
captionEl: $("#stars-cap-{{movie.key}}"),
     inputType: "select"
 });
{% endfor %}

$("#stars-wrapper-newmovie").stars({
captionEl: $("#stars-cap-newmovie"),
     inputType: "select"
 });



 });


function validatenickname(inp){
    name = inp.value;
    inp.value = name.toLowerCase();
    error = 0;

    if (name.length < 5) {
	error = 1;
    }

    for (var i=0, output='', valid="123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"; i<name.length; i++){
       if (valid.indexOf(name.charAt(i)) != -1){
          output += name.charAt(i)
	} else {
	    $("#letters").css("color","red");
	    error = 1;
	}
    }

    inp.value = output.toLowerCase();
    if (error == 0){
	$("#nick").html(output.toLowerCase());
    	$.getJSON("/rpc", { action: "NicknameAvailable", nickname:output.toLowerCase() },  function(data){
	    if (data.available == 0){
	        $("#errors").html("Taken").css("color","red");
		$("#submit").attr('disabled','disabled');
	    } else {
		$("#errors").html("Valid").css("color","green");
		$("#submit").removeAttr('disabled');

	    }
	});
    } else {
	$("#errors").html("Invalid").css("color","red");
	$("#submit").attr('disabled','disabled');
    }
}

</script>

<form action='/profile' method='post'>

    Nickname: <input type='text' name='nickname' value='{{nickname}}' onkeyup='validatenickname(this);'/> <span id='errors'></span><br/>
<span id='letters'>A nickname must contain only lowercase letters and/or numbers.</span> <br/>
A nickname must be at least 5 characters long.<br/>
    Note: this will be used to identify you on the site<br/> (ex: www.mustseemovies.org/profiles/<span id='nick'>[NICKNAME]</span> )<br/>
<br/>
    Privacy: 
    <select name='privacy'>
        <option value='everyone' selected='selected'>Everyone can see my profile</option>
        <option value='members'>Members can see my profile</option>
        <option value='nobody'>Nobody can see my profile</option>
    </select>
        
        
        <br/>
<br/>
<input type='submit' value='Create Profile' id='submit' disabled='disabled'/>
</form>

			  {% endblock %}
